<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getVideoApi } from '@/api/index';
import RightTitle from '../../components/RightTitle.vue';

// 定义类型
interface typeData {
    [key: string]: any
}

const dutyImg: typeData = ref("");

onMounted(async () => {
    const resp = await getVideoApi();
    // console.log(resp.data.data.result[0]);
    dutyImg.value = resp.data.data.result[0][0];
});

const videoSrc = ref('/src/assets/video.mp4');
// 视频播放器配置
let playerOptions = ref({
    playbackRates: [1.0, 1.5, 2.0, 3.0], // 播放倍速
    autoplay: true, // 视频将在浏览器加载完成后自动播放
    muted: true, // 视频将被静音播放
    loop: true, // 视频将循环播放
    // preload: 'auto',
    language: 'zh-CN', // 设置控件的语言
    aspectRatio: '9:3', // 设置播放器的宽高比
    fluid: true, // 按比例缩放,以适应其容器
    notSupportedMessage: '此视频暂无法播放，请稍后再试', // 无法播放媒体源时显示的默认信息
    controls: true, // 显示控制条（播放/暂停、音量、进度条等控件）
    controlBar: {
        timeDivider: true, // 当前时间和持续时间的分隔符
        durationDisplay: true, // 显示持续时间
        remainingTimeDisplay: false, // 是否显示剩余时间功能
        fullscreenToggle: true // 是否显示全屏按钮
    }
});
</script>

<template>
    <div class="video-box">
        <!-- 监控画面标题 -->
        <RightTitle title="监控画面"></RightTitle>

        <dv-border-box1 class="dv-border">
            <div class="dv-box">
                <img :src="dutyImg.dutySituation_img" alt="">
            </div>
        </dv-border-box1>
        <dv-border-box1 class="dv-border">
            <div class="dv-box">
                <video-player class="video" :src="videoSrc" :options="playerOptions" :volume="0.6" />
            </div>
        </dv-border-box1>
        <dv-border-box1 class="dv-border">
            <div class="dv-box">
                <video-player class="video" :src="videoSrc" :options="playerOptions" :volume="0.6" />
            </div>
        </dv-border-box1>
    </div>
</template>

<style scoped lang="scss">
.video-box {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .dv-border {
        flex: 1;
        margin-top: 2%;

        .dv-box {
            width: 90%;
            height: 85%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            border-radius: 30px;
            overflow: hidden; // 11111111

            >img {
                width: 100%;
                height: 100%;
            }

            .video {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>